
$(window).on('beforeunload', function(){      //刷新页面提示
    return '确定要离开吗?您的聊天记录可能不会被保存.';
});

var session_path = 'web_im';        //定义sessionStorage保存路径以便清空

/**
 * 昵称搜索
 */
document.getElementById('search_bar').addEventListener('input', function(){
    var l, v = this.value;
    $('.chat_list .chat_list_item ').each(function(){
        if(!$(this).hasClass('hide')){
            l = $(this);
            if(v.replace(/\s/g, '') == ''){
                l.find('.chat_obj').show();
            }else{
                l.find('.chat_obj').each(function(){
                    if($(this).find('.obj_name').text().indexOf(v) == -1){
                        $(this).hide();
                    }else{
                        $(this).show();
                    }
                });
            }
        }
    });
});

$(function(){
    editor.init('reply');   //文本域操作监听
    Im.clearSession();      //清空缓存数据
    Im.createFaceMap();     //生成表情选择面板
    Im.session('talk_type', 'friend');       //设置默认聊天类型
    getHxData();
});

/**
 * 获取用户数据
 */
function getHxData(){
    var index = layer.load(1);
    $.post(GET_INFO_URL, {}, function(res){
        layer.close(index);
        if(res.status == 1){
            var data = res.data;
            Im.init(data);       //初始化应用
        }else{
            layer.msg(res.msg);
        }
    }, 'JSON');
}

var Im = {
    guard_time : 0,
    conf : {
        api_uri : 'http://chatapp.v587.co/',
        actionMap : {
            room : 'room',
            userInfo : 'user/info',
            friendList : 'user/getGroupUsers'
        },
        face_map : {
            "[):]" : 'ee_1',
            "[:D]" : 'ee_2',
            "[;)]" : 'ee_3',
            "[:-o]" : 'ee_4',
            "[:p]" : 'ee_5',
            "[(H)]" : 'ee_6',
            "[:@]" : 'ee_7',
            "[:s]" : 'ee_8',
            "[:$]" : 'ee_9',
            "[:(]" : 'ee_10',
            "[:&#039;(]" : 'ee_11',
            "[:|]" : 'ee_12',
            "[(a)]" : 'ee_13',
            "[8o|]" : 'ee_14',
            "[8-|]" : 'ee_15',
            "[+o(]" : 'ee_16',
            "[&lt;o)]" : 'ee_17',
            "[|-)]" : 'ee_18',
            "[*-)]" : 'ee_19',
            "[:-#]" : 'ee_20',
            "[:-*]" : 'ee_21',
            "[^o)]" : 'ee_22',
            "[8-)]" : 'ee_23',
            "[(|)]" : 'ee_24',
            "[(u)]" : 'ee_25',
            "[(S)]" : 'ee_26',
            "[(*)]" : 'ee_27',
            "[(#)]" : 'ee_28',
            "[(R)]" : 'ee_29',
            "[({)]" : 'ee_30',
            "[(})]" : 'ee_31',
            "[(k)]" : 'ee_32',
            "[(F)]" : 'ee_33',
            "[(W)]" : 'ee_34',
            "[(D)]" : 'ee_35'
        },
        rabbit_face_map : {
            'em1001' : 'icon_002',
            'em1002' : 'icon_007',
            'em1003' : 'icon_010',
            'em1004' : 'icon_012',
            'em1005' : 'icon_013',
            'em1006' : 'icon_018',
            'em1007' : 'icon_019',
            'em1008' : 'icon_020',
            'em1009' : 'icon_021',
            'em1010' : 'icon_022',
            'em1011' : 'icon_024',
            'em1012' : 'icon_027',
            'em1013' : 'icon_029',
            'em1014' : 'icon_030',
            'em1015' : 'icon_035',
            'em1016' : 'icon_040'
        },
    },
    /**
     * 应用初始化
     * @param data
     */
    init : function(data){
        this.data = data;
        this.listen();
        this.guard();
    },
    //心跳检测
    guard : function(){
        var options = {
            apiUrl: WebIM.config.apiURL,
            user: Im.data.hx_name,
            pwd: Im.data.hx_pass,
            appKey: WebIM.config.appkey
        };
        setInterval(function(){
            if(Im.guard_time >= 60){
                Im.guard_time = 0;
                Im.conn.open(options);        //连接
                console.log('heartbeat ping.');
            }else{
                Im.guard_time ++;
            }
        }, 1000);
    },
    /**
     * 环信消息监听
     */
    listen : function(){
        /**
         * 连接环信服务器
         * @type {*|connection}
         */
        this.conn = new WebIM.connection({
            https: WebIM.config.https,
            url: WebIM.config.xmppURL,
            isAutoLogin: WebIM.config.isAutoLogin,
            isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
        });


        /**
         * 添加监听事件
         */
        this.conn.listen({
            onOpened: function ( message ) {          //连接成功回调
                // 如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
                // 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true
                // 则无需调用conn.setPresence();

                //获取列表
                Im.getChatList('friend');
            },
            onClosed: function ( message ) { console.log(message) },         //连接关闭回调
            onTextMessage: function ( message ) {
                switch (message.type){
                    case "chat":
                        Im.buildPanel('friend', {tag:message.from}, 'text', message);
                        break;
                    case "groupchat":
                        Im.buildPanel('group', {tag:message.to}, 'text', message);
                        break;
                    case 'chatroom':
                        Im.buildPanel('room', {tag:message.to}, 'text', message);
                        break;
                }
            },    //收到文本消息
            onEmojiMessage: function ( message ) { console.log(message) },   //收到表情消息
            onPictureMessage: function ( message ) {
                switch (message.type){
                    case "chat":
                        Im.buildPanel('friend', {tag:message.from}, 'image', message);
                        break;
                    case "groupchat":
                        Im.buildPanel('group', {tag:message.to}, 'image', message);
                        break;
                    case 'chatroom':
                        Im.buildPanel('room', {tag:message.to}, 'image', message);
                        break;
                }
            }, //收到图片消息
            onCmdMessage: function ( message ) { console.log(message) },     //收到命令消息
            onAudioMessage: function ( message ) {
                var options = { url: message.url };
                options.onFileDownloadComplete = function ( response ) {
                    var objectURL = WebIM.utils.parseDownloadResponse.call(Im.conn, response);
                    message.audio = objectURL;
                    switch (message.type){
                        case "chat":
                            Im.buildPanel('friend', {tag:message.from}, 'audio', message);
                            break;
                        case "groupchat":
                            Im.buildPanel('group', {tag:message.to}, 'audio', message);
                            break;
                        case 'chatroom':
                            Im.buildPanel('room', {tag:message.to}, 'audio', message);
                            break;
                    }
                    //音频下载成功
                };
                options.onFileDownloadError = function () {
                    layer.msg('下载语音失败.');
                    //音频下载失败
                };
                //通知服务器将音频转为mp3
                options.headers = {
                    'Accept': 'audio/mp3'
                };
                WebIM.utils.download.call(Im.conn, options);
            },   //收到音频消息
            onLocationMessage: function ( message ) { console.log(message) },//收到位置消息
            onFileMessage: function ( message ) { console.log(message) },    //收到文件消息
            onVideoMessage: function (message) {
                console.log(message)
                /*var node = document.getElementById('privateVideo');
                 var option = {
                 url: message.url,
                 headers: {
                 'Accept': 'audio/mp4'
                 },
                 onFileDownloadComplete: function (response) {
                 var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
                 node.src = objectURL;
                 },
                 onFileDownloadError: function () {
                 console.log('File down load error.')
                 }
                 };
                 WebIM.utils.download.call(conn, option);*/
            },   //收到视频消息
            onPresence: function ( message ) {
                console.log(message);
                Im.buildNoticeMessage(message);
            },       //收到联系人订阅请求、处理群组、聊天室被踢解散等消息
            onRoster: function ( message ) { console.log(message) },         //处理好友申请
            onInviteMessage: function ( message ) { layer.confirm('您收到群邀请,现在将重载页面请确认.', function(){
                window.location.reload();
            }) },  //处理群组邀请
            onOnline: function () { layer.msg('您已重新上线.'); },                  //本机网络连接成功
            onOffline: function () { layer.alert('您的网络已掉线，请检查网络.'); },                 //本机网络掉线
            onError: function ( message ) { console.log(message);
                if(message.type == 8 && message.conflict == true){
                    layer.alert('您的账号已在其他地方登陆.');
                    Im.conn.close();        //关闭连接
                }
            },          //失败回调
            onBlacklistUpdate: function (list) {       //黑名单变动
                // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
                console.log(list);
            }
        });
        var options = {
            apiUrl: WebIM.config.apiURL,
            user: Im.data.hx_name,
            pwd: Im.data.hx_pass,
            appKey: WebIM.config.appkey
        };
        this.conn.open(options);        //连接
    },
    buildNoticeMessage : function(message){
        var room_name, room_list;
        switch (message.type){
            case 'joinChatRoomSuccess':
                room_name = '';
                room_list = Im.session('room_list');
                for(var i = 0; i < room_list.length; i++){
                    if(room_list[i].hx_id == message.from){
                        room_name = room_list[i].name;
                        break;
                    }
                }
                layer.msg('您已加入聊天室[' + room_name + ']');
                break;
            case 'leaveChatRoom':
                room_name = '';
                room_list = Im.session('room_list');
                for(var i = 0; i < room_list.length; i++){
                    if(room_list[i].hx_id == message.from){
                        room_name = room_list[i].name;
                        break;
                    }
                }
                layer.msg('您已退出聊天室[' + room_name + ']');
                break;
        }
    },
    /**
     * 请求接口数据
     * @param action
     * @param params
     * @param call
     */
    request : function(action, params, call){
        //var url = this.conf.api_uri + this.conf.actionMap[action];
        var data = {};
        data.params = params;
        data.action = action;
        var index = layer.load(1);
        $.post(REQUEST_URL, data, function(res){
            layer.close(index);
            if(res.code == 1){
                call && call(res);
            }else{
                layer.alert(res.msg, {icon:2});
            }
        }, 'JSON');
    },
    /**
     * 添加选中聊天对象的监听事件
     */
    listenChoseChat : function(){
        var chat_list = $('.chat_list li');
        var obj_list = $('.top_bar .obj_list');
        for(var i = 0; i < chat_list.length; i++){
            chat_list[i].onclick = function(){
                var tag = $(this).attr('tag');
                var type = $(this).attr('type');
                var shade = $('.chat_panel .chat_shade');
                if(shade.length > 0){       //移除遮罩层
                    shade.addClass('hide');
                }
                chat_list.removeClass('chat_item_active');
                $(this).addClass('chat_item_active');       //添加选中事件
                if(type == 'room'){     //如果类型是聊天室
                    if(Im.session('now_room')){     //如果缓存了上一个聊天室
                        if(Im.session('now_room') != tag){      //如果上一个聊天室不等于当前选择的聊天室
                            Im.conn.quitChatRoom({roomId:Im.session('now_room')});    //退出上一个聊天室
                            Im.conn.joinChatRoom({roomId:tag});    //加入当前聊天室
                        }
                    }else{
                        Im.conn.joinChatRoom({roomId:tag});    //加入当前聊天室
                    }
                    Im.session('now_room', tag);       //reset
                }
                if(!obj_list.hasClass('hide')){
                    obj_list.addClass('hide');      //隐藏群员列表
                }
                obj_list.empty();       //清空群成员列表
                Im.session('talk_tag', tag);       //设置当前聊天对象session
                Im.buildPanel(type, {tag:tag}, 'chose');
            }
        }
    },
    /**
     * 获取并缓存用户数据
     * @param username
     * @param call
     */
    getUserInfo : function(username, call){
        var user_map = Im.session('user_map');
        if(user_map){
            if(user_map[username]){     //如果缓存的有该用户的数据
                call && call(user_map[username]);
            }else{      //如果有缓存但是没有该用户的数据
                Im.requestUserInfo(username, function(data){
                    data = data.data[username];
                    user_map[data.username] = data;
                    Im.session('user_map', user_map);
                    call && call(user_map[username]);
                });
            }
        }else{      //如果没有缓存
            Im.requestUserInfo(username, function(data){
                var session = {};
                data = data.data[username];
                session[data.username] = data;
                Im.session('user_map', session);
                call && call(session[username]);
            });
        }
    },
    /**
     * 构建面板
     * @param type      聊天类型[chose=>选择对象,friend=>好友,group=>群组,room=>聊天室]
     * @param info
     * @param message
     * @param msg_type      消息类型
     */
    buildPanel : function(type, info, msg_type, message){
        switch (type){
            case 'friend':
                Im.getUserInfo(info.tag, function(userinfo){
                    Im.drawChatPanel(userinfo, type, msg_type, message);
                });
                break;
            case 'group':
                if(msg_type == 'chose'){
                    var data = {username:info.tag};
                    var group_list = Im.session('group_list');
                    for(var i = 0; i < group_list.length; i++){
                        if(group_list[i].roomId == info.tag){
                            data.groupname = group_list[i].name;
                            data.owner = group_list[i].owner;
                            break;
                        }
                    }
                    Im.drawChatPanel(data, type, msg_type, message);
                }else{
                    Im.getUserInfo(message.from, function(userinfo){
                        userinfo.true_user = userinfo.username;
                        userinfo.username = info.tag;       //username用于定义dom面板，当类型为group时，username应为群组的id
                        var group_list = Im.session('group_list');
                        for(var i = 0; i < group_list.length; i++){
                            if(group_list[i].roomId == info.tag){
                                userinfo.groupname = group_list[i].name;        //获取群组名称
                                break;
                            }
                        }
                        Im.drawChatPanel(userinfo, type, msg_type, message);
                    });
                }
                break;
            //不处理聊天室数据
            /*case 'room':
                var room_list = Im.session('room_list');
                if(msg_type == 'chose') {       //如果是选择面板
                    var data = {username: info.tag};
                    for (var i = 0; i < room_list.length; i++) {
                        if (room_list[i].hx_id == info.tag) {
                            data.roomname = room_list[i].name;
                            data.owner = room_list[i].owner;
                            data.id = room_list[i].id;      //房间的id用于删除聊天室
                            break;
                        }
                    }
                    Im.drawChatPanel(data, type, msg_type, message);
                }else{      //如果是接收到消息
                    Im.getUserInfo(message.from, function(userinfo){
                        userinfo.username = info.tag;       //username用于定义dom面板，当类型为group时，username应为群组的id
                        for (var i = 0; i < room_list.length; i++) {
                            if (room_list[i].hx_id == info.tag) {
                                userinfo.roomname = room_list[i].name;
                                userinfo.owner = room_list[i].owner;
                                userinfo.id = room_list[i].id;      //房间的id用于删除聊天室
                                break;
                            }
                        }
                        Im.drawChatPanel(userinfo, type, msg_type, message);
                    });
                }
                break;*/
        }
        if(msg_type != 'chose'){        //如果不是选择对象事件
            Im.updateContact(type, info.tag, msg_type, message);        //更新最近消息
        }
        Im.promptPoint(type, msg_type, info.tag);       //设置新消息提示点
    },
    /**
     * 操作sessionStorage
     * @param key
     * @param value
     * @returns {*}
     */
    session : function(key, value){
        var table = {};
        if(sessionStorage[session_path]){
            table = JSON.parse(sessionStorage[session_path]);
        }
        if(value === undefined){
            return table[key];      //读取数据
        }else{
            if(value === null || value == false){
                delete table[key];
            }else{
                table[key] = value;
            }
            try {
                sessionStorage[session_path] = JSON.stringify(table);
            } catch(oException) {
                if(oException.name === 'QuotaExceededError') {
                    Im.dump('超出本地存储限额,已清空缓存.', true);
                    //如果历史信息不重要了，可清空后再设置
                    table = {};     //清空缓存数据
                    sessionStorage.clear();
                    sessionStorage[session_path] = JSON.stringify(table);
                }else{
                    Im.dump('缓存数据失败.', true);
                }
            }
        }
    },
    /**
     * 打印提示数据
     * @param msg
     * @param alert
     */
    dump : function(msg, alert){
        if(alert){
            layer.msg(msg);
        }
        console.log(msg);
    },
    /**
     * 构造聊天列表
     * @param list
     * @param type
     * @param show_type
     * @returns {string}
     */
    createChatList : function(list, type, show_type){
        var face, title, tag;
        var chat_div = $('.chat_list');
        var dom = $('#chat_' + type + '_list');
        if(dom.length > 0){
            dom.show();
        }else {
            var html = '<ul id="chat_'+type+'_list" class="chat_list_item hide">';
            for (var i = 0; i < list.length; i++) {
                switch (type) {      //对象名称以及tag
                    case 'friend':
                        if (Im.data.type == 1) {
                            if (list[i].type == 1) {
                                continue;      //类型为1的用户不能显示用户为1的好友
                            }
                        }
                        tag = list[i].username;
                        title = list[i].nickname;
                        break;
                    case 'group':
                        tag = list[i].roomId;
                        title = list[i].name;
                        break;
                    case 'room':
                        tag = list[i].hx_id;
                        title = list[i].name;
                        break;
                }
                face = list[i].face ? list[i].face : USER_DEF_HEAD;
                html += '<li class="chat_obj" type="' + type + '" tag="' + tag + '"> ' +
                    '<div class="prompt hide"></div><div class="head_pic"><img src="' + face + '" /> ' +
                    '</div> <div class="obj_name">' + title + '</div><div class="obj_sign"></div></li>';
            }
            html += '</ul>';
            chat_div.append(html);
            Im.listenChoseChat();       //监听事件
        }
        if(show_type){
            $('#chat_'+show_type+'_list').removeClass('hide');      //显示默认列表
        }
    },
    /**
     * 显示聊天列表
     * @param type
     */
    displayChatList : function(type){
        $('.chat_list ul').addClass('hide');
        $('#chat_'+type+'_list').removeClass('hide');
    },
    /**
     * 获取聊天列表及缓存数据
     * @param show_type
     */
    getChatList : function(show_type){
        var data, html, index;

        // 好友列表
        var friend_list = Im.session('friend_list');
        if(friend_list){
            Im.createChatList(friend_list, 'friend', show_type);        //构造聊天列表
        }else{      //获取并缓存列表
            index = layer.load(1);
            data = {groupid:Im.data.groupid, user_id:Im.data.id};
            this.request(Im.conf.actionMap.friendList, data, function(res){
                layer.close(index);
                if(res.code == 1){
                    Im.session('friend_list', res.data);
                    Im.createChatList(res.data, 'friend', show_type);
                }else{
                    return layer.alert('获取好友列表失败.', {icon:2});
                }
            }, 'JSON');
        }

        // 群组列表
        var group_list = Im.session('group_list');
        if(group_list){

            //发送上线信息
            if(Im.data.type == '1' && !sessionStorage.is_send_online){
                var online_msg = '大爷来了，掌柜快来伺候着！';
                Im.buildPanel('group', {tag:Im.data.chatgid}, 'chose', online_msg);
                Im.sendMessage(false, online_msg, 'group', Im.data.chatgid);
                sessionStorage.is_send_online = 1;
            }

            html = Im.createChatList(group_list, 'group', show_type);        //构造聊天列表
        }else{      //获取并缓存列表
            var option = {
                success: function (rooms) {
                    layer.close(index);

                    Im.session('group_list', rooms);
                    Im.createChatList(rooms, 'group', show_type);        //构造聊天列表
                    //发送上线信息
                    if(Im.data.type == '1' && !sessionStorage.is_send_online){
                        var online_msg = '大爷来了，掌柜快来伺候着！';
                        Im.buildPanel('group', {tag:Im.data.chatgid}, 'chose', online_msg);
                        Im.sendMessage(false, online_msg, 'group', Im.data.chatgid);
                        sessionStorage.is_send_online = 1;
                    }

                    /*//这个循环和异步请求好像是多余的
                    Im.request('room/groupDetail', {groupid:true}, function(res){
                        if(res.code == 1){
                            var owner, group_data = res.data.data;
                            for(var i = 0; i < rooms.length; i++){
                                for(var x = 0 ; x < group_data.length; x++){
                                    if(rooms[i].roomId == group_data[x].groupid){
                                        rooms[i].owner = group_data[x]['owner'].split('_')[1];
                                    }
                                }
                            }

                            Im.session('group_list', rooms);
                            Im.createChatList(rooms, 'group', show_type);        //构造聊天列表

                            //发送上线信息
                            if(Im.data.type == '1' && !sessionStorage.is_send_online){
                                var online_msg = '大爷来了，掌柜快来伺候着！';
                                Im.buildPanel('group', {tag:Im.data.chatgid}, 'chose', online_msg);
                                Im.sendMessage(false, online_msg, 'group', Im.data.chatgid);
                                sessionStorage.is_send_online = 1;
                            }

                        }else{
                            layer.msg(res.msg);
                        }
                    });*/
                },
                error: function () {
                    layer.close(index);
                    layer.alert('List groups error', {icon:2});
                }
            };
            index = layer.load(1);
            Im.conn.listRooms(option);
        }

        //不处理聊天室数据
        /*// 聊天室列表
        var room_list = Im.session('room_list');
        if(room_list){
            html = Im.createChatList(room_list, 'room', show_type);        //构造聊天列表
        }else{      //获取并缓存列表
            index = layer.load(1);
            data = {groupid:Im.data.groupid, user_id:Im.data.id};
            this.request(Im.conf.actionMap.room, data, function(res){
                layer.close(index);
                if(res.code == 1){
                    Im.session('room_list', res.data);
                    Im.createChatList(res.data, 'room', show_type);        //构造聊天列表
                }
            }, 'JSON');
        }*/

    },
    /**
     * 更新最近消息
     * @param type
     * @param tag
     * @param msg_type
     * @param msg
     */
    updateContact : function(type, tag, msg_type, msg){
        var list_dom = $('#chat_'+type+'_list');
        list_dom.find('li').each(function(){
            if($(this).attr('tag') == tag){
                var content = '';
                switch (msg_type){
                    case 'text':
                        if(msg.ext && msg.ext.em_is_big_expression){        //如果是接受的大表情
                            content = '[自定义表情]';
                        }else{
                            content = Im.replaceFace(html_encode(msg.data));
                        }
                        break;
                    case 'image': content = '[图片消息]'; break;
                    case 'audio': content = '[语音消息]'; break;
                }
                $(this).find('.obj_sign').html(content);        //写入最近消息
                list_dom.prepend($(this));      //移动到列表顶部
                return true;
            }
        });
    },
    promptPoint : function(type, action, tag){
        var unread = true;
        if(action == 'chose'){      //如果是选中事件
            var prompt_count = 0;
            $('#chat_'+type+'_list li').each(function(){
                if($(this).attr('tag') == tag){     //移除当前点击dom的红点标记
                    $(this).find('.prompt').addClass('hide');
                }else{
                    if(!$(this).find('.prompt').hasClass('hide')){
                        unread = false;       //如果所有的(当前点击dom必然已读)dom都已读的，则去除父元素的红点
                    }
                }
            });
            if(unread === true){
                $('.chat_items .' + type + ' .prompt').addClass('hide');
            }
        }else {
            if (Im.session('talk_type') != type) {
                $('.chat_items .' + type).find('.prompt').removeClass('hide');
            }
            if (Im.session('talk_tag') != tag) {
                $('#chat_'+type+'_list li').each(function(){
                    if($(this).attr('tag') == tag){
                        return $(this).find('.prompt').removeClass('hide');
                    }
                });
            }
        }
    },
    /**
     * 绘制聊天面板
     * @param line
     * @param msg
     * @param type
     * @param talk_type
     */
    drawChatPanel : function(line, talk_type, type, msg){
        var temp, face, data, message = '';
        var panel = $('#'+talk_type+'_' + line.username);
        if(msg){        //如果是接受或者发送消息...
            switch (type){
                case 'text':
                    if(msg.ext && msg.ext.em_is_big_expression){        //如果是接受的大表情
                        face = IMG_PATH + '/face/' + Im.conf.rabbit_face_map[msg.ext.em_expression_id] + '.gif';
                        content = '<img class="face_img_big" src="'+face+'" />';
                    }else{
                        var content = Im.replaceFace(html_encode(msg.data));
                    }
                    message = Im.createGetItem(line, content, talk_type);
                    break;
                case 'image':
                    data = '<img src="'+msg.url+'" />';
                    message = Im.createGetItem(line, data, talk_type);
                    break;
                case 'audio':
                    data = '<div class="play_audio"><div class="time_long">'+msg.length+'"</div>' +
                        '<img src="'+IMG_PATH+'/on_audio.png" />' +
                        '<audio  src="'+msg.audio+'" type="audio/mpeg">您的浏览器不支持播放音频.</audio></div>';
                    message = Im.createGetItem(line, data, talk_type);
                    break;
            }
        }
        if(panel.length > 0){     //如果与这个人面板已经存在
            panel.append(message);
        }else{
            temp = '<div class="chat_action hide" id="'+talk_type+'_'+line.username+'">'+message+'</div>';
            $('.chat_content').append(temp);
        }
        Im.makeTopNav(talk_type, type, line);     //制作顶部导航数据
        //自动滚动到dom底部
        if(type == 'image'){
            var images = $('#'+talk_type+'_'+line.username).find('.chat_con img');
            images[images.length - 1].onload = function(){  //最后一张图片加载完成后滚动到底部
                if(this.complete){
                    Im.scrollBottom(panel);     //自动滚动到底部
                }
            };
            for(var i = 0; i < images.length; i++){      //给所有图片添加点击事件
                if(!$(images[i]).hasClass('face_img')){     //不为表情绑定放大事件
                    images[i].onclick = function(){
                        viewImage(this)
                    };
                }
            }
        }else{
            if(type == 'audio'){
                Im.audioPlayBind(msg.length);     //绑定音频播放事件
            }
            Im.scrollBottom(panel);     //自动滚动到底部
        }
    },
    /**
     * 制作聊天顶部数据
     * @param talk_type
     * @param line
     * @param type
     */
    makeTopNav : function(talk_type, type, line){
        if(type == 'chose'){        //如果是选择聊天对象
            var top_bar_name;
            var top_conf_html = '';
            var show_list = $('.top_bar .show_list');
            var top_conf_cog = $('.top_bar .top_conf .fa-cog');
            var top_conf_menu = $('.top_bar .top_conf_menu');
            var top_obj_name = $('.top_bar .obj_name');
            top_obj_name.attr('tag', line.username);
            show_list.hide();
            switch (talk_type){
                case 'friend':
                    top_bar_name = line.nickname;
                    break;
                case 'group':
                    top_bar_name = line.groupname;
                    if(line.owner == Im.data.username){      // 如果操作人是群主
                        top_conf_html += '<li onclick="modify_group()">修改群信息</li>';
                        top_conf_html += '<li onclick="close_group()">解散群</li>';
                    }else{
                        if(line.username != Im.data.chatgid){
                            top_conf_html += '<li onclick="exit_group()">退出群</li>';
                        }
                    }
                    top_obj_name.attr('owner', line.owner);      //设置top_bar的群所有者
                    top_conf_menu.empty();
                    top_conf_menu.append(top_conf_html);
                    top_conf_cog.show();        //显示顶部操作列表触发齿轮
                    show_list.show();
                    break;
                case 'room':
                    top_bar_name = line.roomname;
                    if(line.owner == Im.data.username){      // 如果操作人是群主
                        top_conf_html += '<li onclick="close_room()">解散聊天室</li>';
                    }else{
                        //top_conf_html += '<li onclick="exit_room()">退出聊天室</li>';
                    }
                    top_conf_menu.empty();
                    top_conf_menu.append(top_conf_html);
                    show_list.attr('tag', line.username);
                    top_obj_name.attr('room_id', line.id);     //房间的id，用于删除聊天室
                    top_obj_name.attr('owner', line.owner);      //设置top_bar的群所有者
                    top_conf_cog.show();        //显示顶部操作列表触发齿轮
                    show_list.show();
                    break;
            }
            top_obj_name.text(top_bar_name);    //top_bar显示用户名
            $('.chat_content .chat_action').hide();
            $('#'+talk_type+'_' + line.username).show();
        }
    },
    /**
     * 获取用户信息
     * @param user
     * @param call
     */
    requestUserInfo : function(user, call){
        this.request(Im.conf.actionMap.userInfo, {username:user}, function(res){
            if(res.code == 1){
                call && call(res);
            }
        }, 'JSON');
    },
    /**
     * 发送信息
     * @param big_face
     * @param content
     * @param type
     * @param user
     * @returns {*}
     */
    sendMessage : function(big_face, content, type, user){
        var reply = $('#reply');
        content = content ? content : reply.val();
        user = user ? user : Im.session('talk_tag');
        var talk_type = type ? type : Im.session('talk_type');
        var panel = $('#'+talk_type+'_' + user);
        // 单聊发送文本消息
        var id = Im.conn.getUniqueId();                 // 生成本地消息id
        var msg = new WebIM.message('txt', id);      // 创建文本消息
        var option = {
            msg: content,       // 消息内容
            to: user,        // 接收消息对象（用户id）
            roomType: false,
            success: function (id, serverMsgId) {
                $('#item_' + id).find('.load').remove();        //移除load层
            },
            fail: function () {
                Im.dump('发送消息失败.', true);
            }
        };
        switch (talk_type){       //聊天对象设置
            case 'group':
                option.chatType = 'chatRoom';
                break;
            case 'room':
                option.roomType = true;
                option.chatType = 'chatRoom';
                break;
        }
        if(big_face){       //如果是发送大图
            option.ext = {em_is_big_expression:true, em_expression_id:big_face};
            var face = IMG_PATH + '/face/' + Im.conf.rabbit_face_map[big_face] + '.gif';
            content = '<img class="face_img_big" src="'+face+'" />';
        }else{
            if(option.msg == ''){
                return layer.msg('消息不能为空.');
            }
        }
        msg.set(option);
        if(talk_type == 'friend'){
            msg.body.chatType = 'singleChat';
        }else{        //如果是群组或者聊天室
            msg.setGroup('groupchat');
        }
        Im.conn.send(msg.body);     //发送请求
        if(big_face){      //如果是发送大图
            panel.append(Im.createSendItem(content, id));
        }else{
            panel.append(Im.createSendItem(Im.replaceFace(html_encode(content)), id));
        }
        Im.scrollBottom(panel);     //自动滚动到底部
        reply.val('');
    },
    /**
     * 发送图片消息
     */
    sendPicture : function(){
        var user = Im.session('talk_tag');
        var talk_type = Im.session('talk_type');
        var panel = $('#'+talk_type+'_' + user);
        var id = Im.conn.getUniqueId();                   // 生成本地消息id
        var msg = new WebIM.message('img', id);        // 创建图片消息
        var input = document.getElementById('send_image');  // 选择图片的input
        var file = WebIM.utils.getFileUrl(input);      // 将图片转化为二进制文件
        var allowType = {
            'jpg': true,
            'gif': true,
            'png': true,
            'bmp': true
        };
        if (file.filetype.toLowerCase() in allowType) {
            var option = {
                apiUrl: WebIM.config.apiURL,
                file: file,
                to: user,                       // 接收消息对象
                roomType: false,
                chatType: 'singleChat',
                onFileUploadError: function () {      // 消息上传失败
                    layer.msg('上传图片失败.');
                    console.log('onFileUploadError');
                },
                onFileUploadComplete: function () {   // 消息上传成功
                    //console.log('onFileUploadComplete');
                },
                success: function () {                // 消息发送成功
                    $('#item_' + id).find('.load').remove();        //移除load层
                },
                flashUpload: WebIM.flashUpload
            };
            switch (Im.session('talk_type')){       //聊天对象设置
                case 'group':
                    option.chatType = 'chatRoom';
                    break;
                case 'room':
                    option.roomType = true;
                    option.chatType = 'chatRoom';
                    break;
            }
            msg.set(option);
            if(Im.session('talk_type') != 'friend'){        //如果是群组或者聊天室
                msg.setGroup('groupchat');
            }
            Im.conn.send(msg.body);
            var content = '<img src="'+window.URL.createObjectURL(file.data)+'" />';
            panel.append(Im.createSendItem(content, id));
            var images = panel.find('.chat_con img');
            images[images.length - 1].onload = function(){  //最后一张图片加载完成后滚动到底部
                if(this.complete){
                    Im.scrollBottom(panel);     //自动滚动到底部
                }
            };
            for(var i = 0; i < images.length; i++){      //给所有图片添加点击事件
                if(!$(images[i]).hasClass('face_img')){     //不为表情绑定放大事件
                    images[i].onclick = function(){
                        viewImage(this)
                    };
                }
            }
            $(input).val('');
        }else{
            Im.dump('不支持的文件类型.', true);
        }
    },
    /**
     * 创建消息条目
     * @param line
     * @param talk_type
     * @param content
     * @returns {string}
     */
    createGetItem : function(line, content, talk_type){
        var temp, face = line.face ? line.face : USER_DEF_HEAD;
        temp = '<div class="chat_get"> ' +
            '<div class="head_pic" ';
        temp += talk_type == 'group' ? 'onclick="talkWith(\''+line.type+'\', \''+line.true_user+'\')">' : '>';
        temp += '<img src="'+face+'"></div> ' +
            '<div class="chat_name">'+line.nickname+'</div> ' +
            '<div class="chat_time">'+formatTime()+'</div> ' +
            '<div class="chat_pop"> ' +
            '<div class="chat_triangle"></div> ' +
            '<div class="chat_con">'+content+'</div> ' +
            '</div><div class="clear"></div></div>';
        return temp;
    },
    /**
     * 创建回复消息条目
     * @param id
     * @param content
     * @returns {string}
     */
    createSendItem : function(content, id){
        var face = Im.data.face ? Im.data.face : USER_DEF_HEAD;
        return '<div class="chat_send" id="item_'+id+'"> ' +
            '<div class="head_pic"><img src="'+face+'"></div> ' +
            '<div class="chat_name">'+Im.data.nickname+'</div> ' +
            '<div class="chat_time">'+formatTime()+'</div> ' +
            '<div class="chat_pop"> ' +
            '<div class="chat_triangle"></div> ' +
            '<div class="chat_con">'+content+'</div> ' +
            '<div class="load"><img src="'+IMG_PATH+'/loading.gif"></div>' +
            '</div><div class="clear"></div></div>';
    },
    /**
     * 滚动dom视界到底部
     * @param dom
     */
    scrollBottom :function(dom){
        if(dom.length > 0){
            dom.scrollTop(dom[0].scrollHeight);
        }
    },
    /**
     * 替换表情
     * @param content
     * @returns {*}
     */
    replaceFace : function(content){
        var face;
        var map = this.conf.face_map;
        for(var i in map){
            face = IMG_PATH + '/face/' + map[i] + '.png';
            while (content.indexOf(i) > -1){
                content = content.replace(i, '<img class="face_img" src="'+face+'" />');
            }
        }
        return content;
    },
    /**
     * 构造表情选择面板
     */
    createFaceMap : function(){
        var face, bigFaceName, smallFace = '', bigFace = '';
        var replay = $('#reply');
        var faceDom = $('.face_chose');
        var bigFaceMap = $('.face_chose_big');
        var map = Im.conf.face_map;
        var big = Im.conf.rabbit_face_map;
        for(var i in map){
            face = IMG_PATH + '/face/' + map[i] + '.png';
            smallFace += '<li key="'+i+'"><img src="'+face+'" /></li>';
        }
        for(var o in big){
            bigFaceName = IMG_PATH + '/face/' + big[o] + '.gif';
            bigFace += '<li key="'+o+'"><img src="'+bigFaceName+'" /></li>';
        }
        faceDom.append(smallFace);
        bigFaceMap.append(bigFace);
        faceDom.find('li').click(function(){
            replay.val(replay.val() + $(this).attr('key'));
        });
        bigFaceMap.find('li').click(function(){
            Im.sendMessage($(this).attr('key'));        //直接发送大图
        });
    },
    /**
     * 绑定音频播放事件
     * @param length
     */
    audioPlayBind : function(length){
        $('.play_audio').click(function(){
            var parent = $(this);
            var time = 0, num = 1, pic;
            $(this).find('audio')[0].play();
            var index = setInterval(function(){
                if(time > length * 1000){
                    parent.find('img').attr('src', IMG_PATH+'/on_audio.png');
                    return clearInterval(index);
                }
                switch (num){
                    case 1: pic = IMG_PATH+'/audio_1.png'; break;
                    case 2: pic = IMG_PATH+'/audio_2.png'; break;
                    case 3: pic = IMG_PATH+'/audio_3.png'; num = 0; break;
                }
                parent.find('img').attr('src', pic);
                time += 500;
                num ++;
            }, 500);
        });
    },
    /**
     * 清空缓存数据
     */
    clearSession : function(){
        if(sessionStorage[session_path]){
            delete sessionStorage[session_path];        //清空缓存数据
        }
    },
};